<#import '/ftlLibrary/properteisVariable.ftl' as pv/>
<link href="assets/css/bootstrap-select.css" rel="stylesheet"/>
<link href="assets/css/modify.css" rel="stylesheet"/>
<script src="assets/js/select2/select2.js"></script>
<style>
    .bootbox-close-button {
        width: 19px;
        height: 19px;
        border: none;
        cursor: pointer;
        -webkit-appearance: none;
        float: right;
        top: 4px;
        left: -5px;
        position: relative;
        background: #E9F5FF url("assets/img/nav-img/icon_close.png") no-repeat 0 0;
    }

    .inportExcleDialog .modal-dialog {
        width: 80%;
    }

    .imgNum {
        background-size: 100%;
        background-repeat: no-repeat;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        text-align: center;
    }

    .lineDiv {
        border: 1px dashed #ccc;
    }

    .flieDiv1 {
        height: 140px;
        background: url("assets/img/nav-img/img04_03.png") no-repeat;
        width: 110px;
        position: relative;
        left: 50%;
        margin-left: -55px;
        top: 50%;
        margin-top: -90px;
        cursor: pointer;
    }

    .inputStyle {
        width: 110px;
        height: 150px;
        cursor: pointer;
        font-size: 30px;
        outline: medium none;
        position: absolute;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        opacity: 0;
        left: 20px;
        bottom: 0px;
    }

    #regTable,
    #regTable thead,
    #regTable tbody {
        width: 100%;
    }

    #regTable thead td {
        width: 9%;
        text-align: center;
    }

    #tbody .red {
        color: red;
    }

    .tbox {
        width: 200px;
        border: 1px solid #23a8f5;
        height: 25px;
    }

    .tbox div {
        display: block;
        background: #5db2ff;
        float: left;
        height: 100%;
        text-align: center;
        font-family: Verdana;
        line-height: 25px;
        color: #FFF;
        width: 1%;
    }

    .complete,
    .progressMade {
        min-height: 300px;
        border: 1px solid #ccc;
    }

    .completeText {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -15px;
        margin-left: -50px;
        width: 100px;
        height:30px;
        font-size: 30px;
        font-weight: bold;
        color: #000;
    }

    .tboxName,
    .tbox {
        float: left;
        margin: 20px;
    }

    .progressMadeBox {
        overflow: hidden;
    }
</style>
<div class="row" style="margin-left: 0px!important;">
    <div class="col-lg-12 col-sm-12 col-xs-12 text-align-center" style="padding: 0">
        <label class="col-xs-2 text-align-center padding-top-20">
            <div class="row imgNum " style=" background-image: url('assets/img/nav-img/img_03.png');">

            </div>
            <div class="row margin-top-10" style="margin-left: 0px!important;">
                选择需上传文件
            </div>
        </label>
        <label class="col-xs-3" style="padding-top: 40px;padding-right: 0px;padding-left: 0px">
            <div class="lineDiv">
            </div>
        </label>
        <label class="col-xs-2 text-align-center padding-top-20">
            <div class="row imgNum " style=" background-image: url('assets/img/nav-img/img01_03.png');">

            </div>
            <div class="row margin-top-10" style="margin-left: 0px!important;">
                在线预览确认导入
            </div>
        </label>
        <label class="col-xs-3" style="padding-top: 40px;padding-right: 0px;padding-left: 0px">
            <div class="lineDiv">
            </div>
        </label>
        <label class="col-xs-2 text-align-center padding-top-20">
            <div class="row imgNum " style=" background-image: url('assets/img/nav-img/img02_03.png');">

            </div>
            <div class="row margin-top-10" style="margin-left: 0px!important;">
                导入成功
            </div>
        </label>

    </div>
    <div class="col-lg-12 col-sm-12 col-xs-12 text-align-left" style="padding: 20px 20px;color: #ccc">
        导入数据需先下载模板 <a href="javascript:;" style="color: blue;padding-right: 10px;padding-left: 10px">点击下载</a><span
            style="color: blue">‘红黄蓝亲子园客户导入模板’</span><br>
        请根据模板要求整理数据后进行上传，如有上传失败数据，系统将生成上传失败表格，请修正后再进行上传；
        <div class="inportExcleDiv">
            <form method="POST" id="fid" action="" enctype="multipart/form-data">
                <div class="col-lg-12 col-sm-12 col-xs-12 margin-top-20"
                     style="height: 300px;border: 1px solid #ccc;text-align: center;position: relative">
                    <div class="flieDiv1">
                        <a href="javascript:;" class="btn"
                           style="position: relative;width: 180px;top: 120px;left: -35px;background-color: #23a8f5;color: #fff">选择文件<input
                                type="file" name="filePath" class="inputStyle" onchange="appendFilePath(this)"></a>
                        <div class="showFileName"
                             style="width: 300px;height: 30px;line-height: 30px;position:absolute;left: 0px;bottom: -45px;cursor: auto;text-align: center;margin-left: -90px"></div>
                    </div>
                </div>
            </form>
        </div>

        <div class="complete" style="display: none;">
            <div class="completeText">完成</div>
        </div>

        <div class="col-lg-12 col-sm-12 col-xs-12 margin-top-20" style="padding: 0;" id="uploadDetail">
            <div class="progressMade"  id="progressMade" style="display: none;">
                <div class="progressMadeBox">
                    <div class="tboxName" style="margin-right: 100px"></div>
                    <div class="tbox">
                        <div class="tiao"></div>
                    </div>
                </div>
                <div class="widget flat radius-bordered"
                     style="margin-top: 0;box-shadow:0px 0px 10px rgba(122,161,184,0.3); display: none" id="regTable">
                    <div class="widget-body no-padding">
                        <div class="table-scrollable" style="border: none;" id="tableScrollable">
                            <!-- 数据表列信息列表 -->
                            <table class="table table-hover dataTable newtable">
                                <thead>
                                <tr>
                                    <th class="successSize" colspan="11"></th>
                                </tr>
                                </thead>
                                <tbody id="tbody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <!--<div class="inportExcleTable">-->
        <!--<div class="col-lg-12 col-sm-12 col-xs-12 margin-top-20"-->
        <!--style="height: 300px;border: 1px solid #ccc;">-->
        <!--<div class="col-lg-12 col-sm-12 col-xs-12">-->
        <!--<div class="col-xs-12" style="border-bottom: 1px solid #ccc;padding: 10px 0px">-->
        <!--<label style="font-size: 18px;">-->
        <!--成功导入<span style="color: #00adee">9876</span>条数据，失败<span style="color: red">6</span>条，请下载修正后重新导入。-->
        <!--</label>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
    </div>

    <div class="col-lg-12 col-sm-12 col-xs-12">
        <label style="float: right;">
            <button style="width: 100px;border-radius: 0px;border: none;background: #23a8f5 !important;display: none;"
                    onclick="inportExcleSumbit(this)" id="importBtn"
                    class="btn btn-warning shiny search margin-right-10">确认导入
            </button>
        </label>
        <label style="float: right;">
            <button style="width: 100px;border-radius: 0px;border: none;background: #23a8f5 !important;display: none;"
                    onclick="uploadAgain()" id="uploadBtn"
                    class="btn btn-warning shiny search margin-right-10">重新上传
            </button>
        </label>
        <label style="float: right;">
            <button style="width: 100px;border-radius: 0px;border: none;background: #23a8f5 !important;display: none;"
                    onclick="exportData(this)" id="downloadBtn" data-suffix=""
                    class="btn btn-warning shiny search margin-right-10">下载
            </button>
        </label>
        <label style="float: right;">
            <button style="width: 100px;border-radius: 0px;border: none;background: #23a8f5 !important;display: none;"
                    id="completeBtn"
                    class="btn btn-warning shiny search margin-right-10">完成
            </button>
        </label>
        <!--<label style="float: right;">-->
        <!--<button style="width: 100px;border-radius: 0px;border: none;background: #23a8f5 !important;"-->
        <!--class="btn btn-warning shiny search margin-right-10">点击下载-->
        <!--</button>-->
        <!--</label>-->
    </div>
</div>
<script>
    var i = 0;

    /*add——创建tbx下的div加文字和变宽度的方法*/
    function add(i) {
        var tbox = $(".tbox");
        var tiao = $(".tiao");
        tiao.css("width", i + "%").html(i + "%");
    }

    /*创建方法（i++循环起来）*/
    function xh() {
        if (i > 100) {
            return;
        }
        if (i <= 100) {
            setTimeout("xh()", 10)
            add(i);
            i++;
        }
    }

    function uploadAgain() {
        $("#uploadDetail").hide();
        $(".inportExcleDiv").show();
    }
    
    function importPreview() {
        $("#uploadDetail").show();
        $(".inportExcleDiv").hide();
        $("#progressMade").show();
        var formData = new FormData($("#fid")[0]);
        $.ajax({
            url: 'tssStudentController/importPreview.do',
            //url: 'tssMemberPackageController/importExcel.do',
            type: 'POST',
            data: formData,
            dataType: "json",
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (reg) {
                if (reg) {
                    if (reg.resCode == '200') {
                        xh();
                        $("#tbody").html("");
                        setTimeout(function () {
                            $("#regTable").show();
                            $("#importBtn").show();
                            $("#uploadBtn").show();
                            alert(reg.resMsg);
                            $.each(reg.data, function (key, value) {
                                if (key == "list") {
                                    $(value).each(function () {
                                        var html = "<tr>";
                                        var name = '' + this.name + '';
                                        if (name.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.name + "</td>";
                                        } else {
                                            html += "<td>" + this.name + "</td>";
                                        }
                                        var nickName = '' + this.nickName + '';
                                        if (nickName.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.nickName + "</td>";
                                        } else {
                                            html += "<td>" + this.nickName + "</td>";
                                        }
                                        var sex = '' + this.sex + '';
                                        if (sex.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.sex + "</td>";
                                        } else {
                                            html += "<td>" + this.sex + "</td>";
                                        }
                                        var birthday = '' + this.birthday + '';
                                        if (birthday.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.birthday + "</td>";
                                        } else {
                                            html += "<td>" + this.birthday + "</td>";
                                        }
                                        var motherPhone = '' + this.motherPhone + '';
                                        if (motherPhone.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.motherPhone + "</td>";
                                        } else {
                                            html += "<td>" + this.motherPhone + "</td>";
                                        }
                                        var motherName = '' + this.motherName + '';
                                        if (motherName.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.motherName + "</td>";
                                        } else {
                                            html += "<td>" + this.motherName + "</td>";
                                        }
                                        var positionType = '' + this.positionType + '';
                                        if (positionType.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.positionType + "</td>";
                                        } else {
                                            html += "<td>" + this.positionType + "</td>";
                                        }
                                        var fatherPhone = '' + this.fatherPhone + '';
                                        if (fatherPhone.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.fatherPhone + "</td>";
                                        } else {
                                            html += "<td>" + this.fatherPhone + "</td>";
                                        }
                                        var fatherName = '' + this.fatherName + '';
                                        if (fatherName.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.fatherName + "</td>";
                                        } else {
                                            html += "<td>" + this.fatherName + "</td>";
                                        }
                                        var positionType2 = '' + this.positionType2 + '';
                                        if (positionType2.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.positionType2 + "</td>";
                                        } else {
                                            html += "<td>" + this.positionType2 + "</td>";
                                        }
                                        html += "</tr>";
                                        $("#tbody").append(html);
                                    });
                                }
                                if (key == "map") {
                                    $(value).each(function () {
                                        $("#downloadBtn").attr("data-suffix",this.suffix);
                                        $(".successSize").html("成功导入 <a style='color:blue'>" + this.successSize + "</a> 条数据，失败 <a style='color:red;'>" + this.errorSize + "</a> 条，请下载修正后重新导入。");
                                    });
                                }
                            })
                        },1000)
                    }else {
                        alert(reg.resMsg);
                    }
                }
            },
            error: function (reg) {
                alert(reg);
                return;
            }
        });
    }
    function inportExcleSumbit() {
        var formData = new FormData($("#fid")[0]);
        $.ajax({
            url: 'tssStudentController/importStudent.do',
            //url: 'tssMemberPackageController/importExcel.do',
            type: 'POST',
            data: formData,
            dataType: "json",
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (reg) {
                if (reg) {
                    if(reg.resCode == '200'){
                        $(".complete").show();
                        $("#uploadDetail").hide();
                        $("#uploadBtn").hide();
                        $("#importBtn").hide();
                        $("#completeBtn").show();
                    }
                    if (reg.resCode == '201') {
                        xh();
                        $("#tbody").html("");
                        $("#uploadBtn").hide();
                        $("#importBtn").hide();
                        $("#downloadBtn").show();
                        setTimeout(function () {
                            alert(reg.resMsg);
                            $.each(reg.data, function (key, value) {
                                if (key == "list") {
                                    $(value).each(function () {
                                        var html = "<tr>";
                                        var name = '' + this.name + '';
                                        if (name.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.name + "</td>";
                                        } else {
                                            html += "<td>" + this.name + "</td>";
                                        }
                                        var nickName = '' + this.nickName + '';
                                        if (nickName.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.nickName + "</td>";
                                        } else {
                                            html += "<td>" + this.nickName + "</td>";
                                        }
                                        var sex = '' + this.sex + '';
                                        if (sex.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.sex + "</td>";
                                        } else {
                                            html += "<td>" + this.sex + "</td>";
                                        }
                                        var birthday = '' + this.birthday + '';
                                        if (birthday.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.birthday + "</td>";
                                        } else {
                                            html += "<td>" + this.birthday + "</td>";
                                        }
                                        var motherPhone = '' + this.motherPhone + '';
                                        if (motherPhone.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.motherPhone + "</td>";
                                        } else {
                                            html += "<td>" + this.motherPhone + "</td>";
                                        }
                                        var motherName = '' + this.motherName + '';
                                        if (motherName.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.motherName + "</td>";
                                        } else {
                                            html += "<td>" + this.motherName + "</td>";
                                        }
                                        var positionType = '' + this.positionType + '';
                                        if (positionType.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.positionType + "</td>";
                                        } else {
                                            html += "<td>" + this.positionType + "</td>";
                                        }
                                        var fatherPhone = '' + this.fatherPhone + '';
                                        if (fatherPhone.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.fatherPhone + "</td>";
                                        } else {
                                            html += "<td>" + this.fatherPhone + "</td>";
                                        }
                                        var fatherName = '' + this.fatherName + '';
                                        if (fatherName.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.fatherName + "</td>";
                                        } else {
                                            html += "<td>" + this.fatherName + "</td>";
                                        }
                                        var positionType2 = '' + this.positionType2 + '';
                                        if (positionType2.indexOf('|') > 0) {
                                            html += "<td class='red'>" + this.positionType2 + "</td>";
                                        } else {
                                            html += "<td>" + this.positionType2 + "</td>";
                                        }
                                        html += "</tr>";
                                        $("#tbody").append(html);
                                    });
                                }
                                if (key == "map") {
                                    $(value).each(function () {
                                        $("#downloadBtn").attr("data-suffix",this.suffix);
                                        $(".successSize").html("成功导入 <a style='color:blue'>" + this.successSize + "</a> 条数据，失败 <a style='color:red;'>" + this.errorSize + "</a> 条，请下载修正后重新导入。");
                                    });
                                }
                            })
                        },1000)
                    }
                    else {
                        alert(reg.resMsg);
                    }
                }
//                if (reg == "上传成功!") {
//                    location.reload();
//                }
            },
            error: function (reg) {
                alert(reg);
                return;
            }
        });
    }
    function exportData(that) {
        var suffix = $(that).attr("data-suffix");
        console.log(suffix)
        //suffix = ".xls"
        var exportIframe = ' <iframe class="hidden" id="exportIframe" name="exportIframe"></iframe>';
        var exportSrc ="tssStudentController/errorExportExcle.do";
        var $exportForm = $('<form method="post" target="exportIframe" action="' + exportSrc + '" id="exportForm"></form>');

        $exportForm.append('<input type="hidden" name="suffix" value="' + suffix + '">');

        $("body #exportIframe").remove();
        $("body #exportForm").remove();
        $("body").append(exportIframe);
        $("body").append($exportForm);
        $exportForm.submit();
    }
    //    点击上传显示文件名
    function appendFilePath(that) {
        var val = $(that).val();
        alert(val)
        if (val.indexOf("xlsx") == -1) {
            alert("请选择excel文件上传");
            return;
        } else {
            $(".showFileName").empty().append(val);
            $(".tboxName").html(val);
            importPreview();
        }
    }
    
    $("#completeBtn").click(function () {
        $(".modal-content").find(".bootbox-close-button").click();
    })

</script>
